<template>
  <a-card class="ax__template SystemRole" :body-style="bodyStyle">
    <a-flex vertical class="h-100" v-if="roleFormMode === RoleViewNum.ROLE_TABLE">
      <!-- 顶部筛选，查询选项 -->
      <HeadVue />
      <!-- loading效果 -->
      <!-- 中间数据 -->
      <div class="data__content">
        <TableVue></TableVue>
      </div>
      <FooterVue></FooterVue>
    </a-flex>
    <template v-else-if="roleFormMode === RoleViewNum.RESOURCE">
      <RoleResource />
    </template>
    <template v-else-if="roleFormMode === RoleViewNum.ROLE_FORM">
      <RoleForm />
    </template>
    <template v-else-if="roleFormMode === RoleViewNum.ASSIGN">
      <RoleAssign />
    </template>
    <template v-else-if="roleFormMode === RoleViewNum.UNASSIGN">
      <RoleUnAssign />
    </template>

    <!-- end -->
  </a-card>
</template>

<script setup lang="ts">
import { bodyStyle } from '@/global/config/gen';
import { roleList } from './data/curd';
import { RoleViewNum, roleFormMode, roleTable } from './data/table';
import RoleAssign from './pages/assign/RoleAssign.vue';
import RoleResource from './pages/assign/RoleResource.vue';
import RoleUnAssign from './pages/assign/RoleUnassign.vue';
import FooterVue from './pages/components/AXFooter.vue';
import RoleForm from './pages/components/AXForm.vue';
import HeadVue from './pages/components/AXHead.vue';
import TableVue from './pages/table-card/AXTable.vue';

onMounted(async () => {
  await roleList();
  roleFormMode.value = RoleViewNum.ROLE_TABLE;
});
</script>

<style lang="scss" scoped>
.ax__template {
  :deep(.ant-card-body) {
    height: 100%;
  }
}
</style>
